<template>
  <view class="container" :style="containerStyle">
    <view class="center">
      <image class="images" src="/static/images/nopre.png" />
      <view class="text">您还没有填写志愿表</view>
      <button class="button">模拟填报</button>
    </view>
    <!-- 视图内容 -->
  </view>
</template>
  
<script>
export default {
  data() {
    return {
      containerStyle: {} // 视图容器的样式
    };
  },
  mounted() {
    // 获取屏幕信息
    uni.getSystemInfo({
      success: (res) => {
        // 设置视图容器的宽高
        this.containerStyle = {
          width: res.windowWidth + "px",
          height: res.windowHeight + "px"
        };
      }
    });
  }
};
</script>
  
<style lang="less" scoped>
.container {
  background-color: white;
  width: 100%;

  .center {
    position: relative;
    top: 500upx;
    text-align: center;

    .images {
      position: relative;
      width: 300upx;
      height: 200upx;
    }
    .text{
      font-size: 28upx;
      color:#cccccc;
      margin: 30upx 0;
    }
    .button{
      width: 165upx;
      height: 60upx;
      background-color: #d01117;
      color:white;
      border-radius: 5upx;
      font-size: 28upx;
      line-height: 60upx;
    }
  }
}
</style>